<template>
    <div class="container">
        <!-- 侧栏 -->
		<Sidebar/>
		<!-- 头部 -->
		<Header/>
        <div class="content Gwidth">
            <div class="header">
                <div class="logo">
                    <img src="" alt="">
                </div>
                <div class="header_right">
                    <h1>北京凯威家具有限公司</h1>
                    <span class="rz"></span>
                    <span class="tag">认证</span>
                </div>
            </div>
            <div class="nav">
                <ul>
                    <li class="Noselect active" @click="ToPage('/factory',1)">首页</li>
                    <li class="Noselect" @click="ToPage('/factory/product',1)">产品中心</li>
                    <li class="Noselect" @click="ToPage('/factory/case',1)">客户案例</li>
                    <li class="Noselect" @click="ToPage('/factory/brand',1)">品牌介绍</li>
                    <li class="Noselect" @click="ToPage('/factory/comment',1)">业主口碑</li>
                </ul>
            </div>
            <div class="factory_cont">
                <div class="banner">
                    <div v-swiper:mySwiper="swiperOption">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="~/static/image/banner.png" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="~/static/image/banner.png" alt="">
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
                <div class="right">
                    <div class="tag">
                        <span>全屋定制</span>
                        <span>儿童家具</span>
                        <span>办公家具</span>
                        <span>办公家具</span>
                        <span>办公家具</span>
                    </div>
                    <div class="evaluation">
                        <div class="rate">
                            <Rate disabled :size="10" ico="md-star" v-model="Rate" />
                            <span>5分</span>
                        </div>
                        <div class="evaluation_cont">
                            <p>“评价内容评价内容评价内容评价内容评价”</p>
                            <nuxt-link to="/login">
                                <span>67条评论>></span>
                            </nuxt-link>
                        </div>
                    </div>
                    <div class="numbers">
                        <div class="item">
                            <div class="num">159</div>
                            <div class="title">产品</div>
                        </div>
                        <div class="item">
                            <div class="num">789</div>
                            <div class="title">客户案例</div>
                        </div>
                        <div class="item">
                            <div class="num">795</div>
                            <div class="title">好评</div>
                        </div>
                    </div>
                    <div class="time">
                        <span>营业时间：</span>
                        <span>08:00-22:00</span>
                    </div>
                    <div class="address">北京朝阳区北京朝阳区北京全部字符全部字符全部字符全部字符</div>
                    <div class="tel">152-3285-5222</div>
                    <div class="btns">
                        <Button type="error" @click="door_to_door_ruler=true">预约上门量尺</Button>
                        <div class="people">888人已预约</div>
                    </div>
                </div>
            </div>
            <div class="product">
                <div class="product_title">
                    <div class="left">
                        <h3>产品中心</h3>
                        <span class="Noselect">办公</span>
                        <span class="Noselect">家居</span>
                        <span class="Noselect">橱柜</span>
                        <span class="Noselect">儿童家具</span>
                        <span class="Noselect">红木</span>
                        <span class="Noselect">木门</span>
                    </div>
                    <div class="more Noselect">查看更多</div>
                </div>
                <div class="product_cont">
                    <div class="item">
                        <div class="img">
                            <img src="" alt="">
                        </div>
                        <h1>精品老板椅沙发椅</h1>
                        <div class="colors">
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="img">
                            <img src="" alt="">
                        </div>
                        <h1>精品老板椅沙发椅</h1>
                        <div class="colors">
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="img">
                            <img src="" alt="">
                        </div>
                        <h1>精品老板椅沙发椅</h1>
                        <div class="colors">
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="case">
                <div class="Title">
                    <h1>客户案例</h1>
                    <div class="more Noselect">查看更多</div>
                </div>
                <div class="case_cont">
                    <div v-swiper:mySwiper2="swiperCase">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="~/static/image/banner.png" alt="">
                                </div>
                                <h1>全屋定制  简约北欧风格北欧风...</h1>
                            </div>
                            <div class="swiper-slide">
                                <div class="img">
                                    <img src="~/static/image/banner.png" alt="">
                                </div>
                                <h1>全屋定制  简约北欧风格北欧风...</h1>
                            </div>
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
            <div class="introduction">
                <div class="left">
                    <div class="Title">
                        <h1>品牌介绍</h1>
                    </div>
                    <div class="T_title">品牌故事</div>
                    <div class="introduction_cont" ref="introduction_cont" :class="{open:open}">
                        北京恺威家具有限公司主要生产和制造的产品包括BD优迪系列、XINZUHE德斯系列、XINZUHE优米格系列、金莱系列、
                        莱特系列、升降台系列、文件柜、优鲁米系列等办公家具。公司生产的办公家具系列的款式均引进欧洲及港台地区的新设
                        计款式，并能根据客户的特殊要求进行设计和生产。已赢得各行业消费者的高度认可，在办公家具行业里有着良好的口碑
                        “不断创新，追求更好”始终是我们的宗旨，为此，我们将秉承“诚信、精致、真诚”的精神，不断地为客户提供完善的
                        北京恺威家具有限公司主要生产和制造的产品包括BD优迪系列、XINZUHE德斯系列、XINZUHE优米格系列、金莱系列、
                        莱特系列、升降台系列、文件柜、优鲁米系列等办公家具。公司生产的办公家具系列的款式均引进欧洲及港台地区的新设
                        计款式，并能根据客户的特殊要求进行设计和生产。已赢得各行业消费者的高度认可，在办公家具行业里有着良好的口碑
                        “不断创新，追求更好”始终是我们的宗旨，为此，我们将秉承“诚信、精致、真诚”的精神，不断地为客户提供完善的
                        服务。莱特系列、升降台系列、文件柜、优鲁米系列等办公家具。公司生产的办公家具系列的款式均引进欧洲及港台地区
                        的新设计款式，并能根据客户的特殊要求进行设计和生产。已赢得各行业消费者的高度认可，在办公家具行业里有的口碑
                        “不断创新，追求更好”始终是我们的宗旨，为此，我们将秉承“诚信、精致、真诚”的精神，不断地为客户提供完善...
                    </div>
                    <div class="is_open" v-if="is_open" @click="open=!open">
                        <span>{{open?'展开':'收起'}}</span>
                        <span :class="{is_open_active:open}"></span>
                    </div>
                    <div class="service_area">
                        <div class="T_title">服务范围</div>
                        <div class="service_area_tags">
                            <span>办公家具</span>
                            <span>医疗家具</span>
                            <span>学校家具</span>
                        </div>
                    </div>
                    <div class="honor">
                        <div class="T_title">资质荣誉</div>
                        <div v-swiper:mySwiper3="swiperHonor">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="img">
                                        <img src="~/static/image/banner.png" alt="">
                                    </div>
                                    <h1>资质内容资质</h1>
                                </div>
                                <div class="swiper-slide">
                                    <div class="img">
                                        <img src="~/static/image/banner.png" alt="">
                                    </div>
                                    <h1>资质内容资质</h1>
                                </div>
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                    <div class="evaluation">
                        <div class="T_title">业主口碑</div>
                        <div class="evaluation_con">
                            <Input v-model="evaluation" type="textarea" maxlength="500" :rows="10" placeholder="请输入正文内容，字数限制500字" />
                            <div class="number">{{evaluation.length}}/500</div>
                            <div class="submit">
                                <div class="left">
                                    <div class="upload-list" v-for="(item,index) in uploadList" :key="index">
                                        <template v-if="item.status === 'finished'">
                                            <img :src="item.url">
                                            <div class="upload-list-cover">
                                                <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                                                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                                        </template>
                                    </div>
                                    <Upload
                                        ref="upload"
                                        :show-upload-list="false"
                                        :on-success="handleSuccess"
                                        :format="['jpg','jpeg','png']"
                                        :max-size="2048"
                                        :on-format-error="handleFormatError"
                                        :on-exceeded-size="handleMaxSize"
                                        multiple
                                        type="drag"
                                        action="//jsonplaceholder.typicode.com/posts/"
                                        style="display: inline-block;width:44px;">
                                        <div style="width: 44px;height:39px;line-height: 39px;">
                                            <img src="~/static/image/ico/upload.png" alt="">
                                        </div>
                                    </Upload>
                                </div>
                                <div class="right">
                                    <Rate v-model="Rate" />
                                    <Button type="error">发布</Button>
                                </div>
                            </div>
                        </div>
                        <div class="evaluation_con_list">
                            <div class="item">
                                <div class="avatar">
                                    <img src="" alt="">
                                </div>
                                <div class="right">
                                    <div class="userInfo">
                                        <div class="name">一起家具网</div>
                                        <div class="time">2020年03月05日</div>
                                    </div>
                                    <div class="des">
                                        评价内容评价内容评价内容评价内容评价内容评价内评价内容评价内容评价内容评价内容评价内容评价内容评价内价
                                        容评价内容评价内容评价内。
                                    </div>
                                    <div class="imgs">
                                        <div class="img">
                                            <img src="" alt="">
                                        </div>
                                        <div class="img">
                                            <img src="" alt="">
                                        </div>
                                        <div class="img">
                                            <img src="" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="avatar">
                                    <img src="" alt="">
                                </div>
                                <div class="right">
                                    <div class="userInfo">
                                        <div class="name">一起家具网</div>
                                        <div class="time">2020年03月05日</div>
                                    </div>
                                    <div class="des">
                                        评价内容评价内容评价内容评价内容评价内容评价内评价内容评价内容评价内容评价内容评价内容评价内容评价内价
                                        容评价内容评价内容评价内。
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="ad">
                        <nuxt-link to="/login">
                            <img src="" alt="">
                        </nuxt-link>
                    </div>
                    <Footer/>
                </div>
            </div>
        </div>
        <!-- 上门尺量弹窗 -->
		<DoorToDoorRuler :is_show="door_to_door_ruler" @onClose="onCloseRuler"/>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import Header from "~/components/Header.vue";
import Sidebar from "~/components/Sidebar.vue";
import DoorToDoorRuler from "~/components/DoorToDoor_ruler.vue"
import Footer from "~/components/Footer.vue"
export default {
    components: {
		Header,
		Sidebar,
        DoorToDoorRuler,
        Footer
	},
    data(){
        return{
            Rate:5,
            open:false,//展开收起
            is_open:false,
            door_to_door_ruler:false,//是否展示上门尺量弹窗
            evaluation:'',//评价内容
            uploadList: [],//上传图片列表
            swiperOption: {
                autoplay: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            },
            swiperCase:{
                autoplay: true,
                slidesPerView : 4,
                spaceBetween : 35,
                // loop : true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            },
            swiperHonor:{
                autoplay: true,
                slidesPerView : 4,
                spaceBetween : 33,
                // loop : true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            }
        }
    },
    created(){
        
    },
    computed:{
		...mapState(['address'])
	},
    mounted(){
        this.$nextTick(() => {
            const domHeight = this.$refs['introduction_cont'].offsetHeight;
            this.open = domHeight > 100 ? true : false;
            this.is_open = domHeight > 100 ? true : false;
        })
        this.uploadList = this.$refs.upload.fileList;
    },
    methods:{
        // 图片上传成功
        handleSuccess (res, file) {
            console.log('图片上传成功---------------------',res,file)
        },
        // 文件格式验证失败时
        handleFormatError (file) {
            this.$Notice.warning({
                title: '上传图片上传失败',
                desc: '图片格式错误请上传jpg,jpeg,png格式图片'
            });
        },
        // 超出图片大小限制
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '上传图片上传失败',
                desc: '图片大小超出限制请上传2M内图片'
            });
        },
        onCloseRuler(){
			this.door_to_door_ruler = false
		},
        // 跳转
		ToPage(url,id){
			this.$router.push({path:url,query:{id:id}})
		},
    },
}
</script>
<style scoped>
    .Title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:50px 0 20px 0;
        border-bottom: 1px solid #eeeeee;
    }
    .Title h1{
        font-size: 20px;
        font-weight: 400;
        color: #333333;
    }
    .content .header{
        display: flex;
        align-items: center;
        margin: 40px auto;
    }
    .content .header .logo{
        width: 60px;
        height: 60px;
        margin-right: 10px;
    }
    .content .header .logo img{
        width: 100%;
        height: 100%;
    }
    .content .header .header_right{
        display: flex;
        align-items: center;
    }
    .header_right h1{
        font-size: 34px;
        font-weight: bold;
        color: #333333;
        margin-right: 14px;
    }
    .content .header .header_right span{
        display: block;
    }
    .header_right .rz{
        width: 28px;
        height: 34px;
        background: url(~/static/image/ico/rz.png)center center no-repeat;
        background-size: 28px 34px;
        margin-right: 10px;
    }
    .header_right .tag{
        padding: 2px 6px;
        border: 1px solid #F30213;
        border-radius: 4px;
        font-size: 12px;
        color: #F30213;
    }
    .content .nav ul{
        display: flex;
        align-items: center;
        padding-bottom: 22px;
        border-bottom: 1px solid #eeeeee;
    }
    .content .nav ul li{
        
        font-size: 20px;
        font-weight: 400;
        color: #666666;
        margin-right: 60px;
    }
    .content .nav ul li.active{
        font-weight: bold;
        color: #333333;
    }
    .content .factory_cont{
        padding-top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .content .factory_cont .right{
        width: calc(100% - 640px);
    }
    .content .banner,.content .banner>>>.swiper-container{
        width: 600px;
        height: 320px;
    }
    .content .banner img{
        width: 100%;
        height: 100%;
    }
    
    .content .banner>>>.swiper-pagination-bullet{
        width: 10px;
        height: 10px;
        background: #FFFFFF;
        opacity: 0.5;
        border-radius: 5px;
        transition: 0.35s;
    }
    .content .banner>>>.swiper-pagination-bullet-active{
        width: 30px;
        background: #FFFFFF;
        opacity: 1;
    }
    .content .banner>>>.swiper-pagination{
        left: 0;
        bottom: 10px;
        width: 100%;
    }
    .content .banner>>>.swiper-pagination span{
        margin-right: 5px;
    }
    .content .factory_cont .right .tag{
        margin-bottom: 16px;
    }
    .content .factory_cont .right .tag span{
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        padding: 5px 16px;
        background: #F0F0F0;
        border-radius: 4px;
    }
    .content .factory_cont .right .evaluation{
		display: flex;
		background: #F0F0F0;
        border-radius: 4px;
        padding: 0 8px;
        margin-bottom: 15px;
	}
	.content .factory_cont .right .evaluation .rate{
		font-size: 12px;
		font-weight: 400;
		color: #F95B15;
        display: flex;
        align-items: center;
	}
	.content .factory_cont .right .evaluation_cont{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
	}
	.content .factory_cont .right .evaluation .evaluation_cont p{
		width: 234px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.content .factory_cont .right .evaluation .evaluation_cont span{
		font-size: 12px;
		font-weight: 400;
		color: #999999;
		padding-left: 9px;
		border-left: 1px solid #CCCCCC;
		line-height: 12px;
	}
	.content .factory_cont .right .evaluation>>>.ivu-rate-star{
		margin-right: 0;
	}
    .content .factory_cont .right .numbers{
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }
    .content .factory_cont .right .numbers .item{
        margin-right: 82px;
        text-align: center;
    }
    .content .factory_cont .right .numbers .item .num{
        font-size: 20px;
        font-weight: bold;
        color: #333333;
    }
    .content .factory_cont .right .numbers .item .title{
        font-size: 14px;
        font-weight: 400;
        color: #333333;
    }
    .content .factory_cont .right .time{
        margin-bottom: 15px;
    }
    .content .factory_cont .right .time span{
        font-size: 14px;
        font-weight: 400;
        color: #333333;
    }
    .content .factory_cont .right .time span:nth-child(1){
        background:url(~/static/image/ico/time.png)left center no-repeat;
        background-size: 13px;
        padding-left: 18px;
        color: #666666;
    }
    .content .factory_cont .right .address{
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        background:url(~/static/image/ico/b_address.png)left center no-repeat;
        background-size: 13px;
        padding-left: 18px;
        margin-bottom: 15px;
    }
    .content .factory_cont .right .tel{
        font-size: 20px;
        font-weight: 400;
        color: #333333;
        background:url(~/static/image/ico/tel.png)left center no-repeat;
        background-size: 18px;
        padding-left: 28px;
        margin-bottom:15px;
    }
    .content .factory_cont .right .btns{
        display: flex;
        align-items: center;
	}
	.content .factory_cont .right button{
		width: 170px;
		height: 44px;
		background: #F30213;
		border-radius: 6px;
        margin-right: 10px;
	}
	.content .factory_cont .right .people{
		font-size: 14px;
        font-weight: 400;
        color: #666666;
	}
    .content .product{
        margin-top: 46px;
    }
    .content .product .product_title{
        padding-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eeeeee;
    }
    .content .product .product_title .left{
        display: flex;
        align-items: center;
    }
    .content .product .product_title .left h3{
        font-size: 20px;
        font-weight: bold;
        color: #333333;
    }
    .content .product .product_title .left span{
        margin-left: 60px;
        font-size: 20px;
        font-weight: 400;
        color: #666666;
    }
    .content .product .product_title .more{
        font-size: 16px;
        font-weight: 400;
        color: #666666;
    }
    .content .product .product_cont{
        display: flex;
        flex-wrap: wrap;
    }
    .content .product .product_cont .item{
        width: 218px;
        margin-right: 28px;
        margin-top: 30px;
    }
    .content .product .product_cont .item:nth-child(5n){
        margin-right: 0;
    }
    .content .product .product_cont .item img{
        width: 100%;
        height: 158px;
    }
    .content .product .product_cont .item h1{
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        margin-top: 10px;
    }
    .content .product .product_cont .item .colors{
        font-size: 0;
        margin-top: 10px;
    }
    .content .product .product_cont .item .colors span{
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 1px solid #cccccc;
        margin: 0 6px 6px 0;
    }
    .content .case_cont{
        padding-top: 30px;
    }
    .content .case_cont .img img{
        width: 100%;
        height: 210px;
    }
    .content>>>.swiper-button-prev:after,.content>>>.swiper-button-next:after{
        content: '';
    }
    .content>>>.swiper-button-prev,.content>>>.swiper-button-next{
        width: 50px;
        height: 50px;
        background: url(~/static/image/ico/prev.png)center center no-repeat;
        background-size: 50px;
    }
    .content>>>.swiper-button-next{
        background: url(~/static/image/ico/next.png)center center no-repeat;
        background-size: 50px;
    }
    .content .case_cont h1{
        font-size: 16px;
        font-weight: 400;
        color: #333333;
    }
    .content .introduction{
        display: flex;
        justify-content: space-between;
    }
    .content .introduction .left{
        width: calc(100% - 344px);
    }
    .content .introduction .right .ad{
        margin-top: 95px;
    }
	.content .introduction .right .ad,.content .introduction .right .ad img{
		width: 300px;
		height: 280px;
		background: #FFCCCC;
	}
    .T_title{
        margin-top: 40px;
        font-size: 18px;
        font-weight: 400;
        color: #333333;
    }
    .content .introduction .introduction_cont{
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 32px;
        transition: 0.35s;
        padding-left: 8px;
    }
    .content .introduction .introduction_cont.open{
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 7;
        overflow: hidden;
    }
    .content .introduction .is_open{
        padding: 10px 0;
        display:flex;
        align-items: center;
        justify-content: center;
    }
    .content .introduction .is_open span{
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        cursor: pointer;
    }
    
    .content .introduction .is_open span:last-child{
        width: 19px;
        height: 10px;
        background:url(~/static/image/ico/b_down.png)center center no-repeat;
        background-size: 19px 10px;
        display:block;
        transform: rotate(180deg);
        /* transition: 0.35s; */
    }
    .content .introduction .is_open .is_open_active{
        transform: rotate(0deg) !important;
    }
    .content .T_title{
        margin-bottom: 20px;
    }
    .content .service_area_tags{
        margin-top: 20px;
    }
    .content .service_area_tags span{
        padding: 6px 16px;
        background: #F0F0F0;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
    }
    .content .honor img{
        width: 100%;
        height: 124px;
    }
    .content .honor .swiper-slide{
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 21px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .content .evaluation_con{
        border: 1px solid #EEEEEE;
    }
    .content .evaluation_con>>>.ivu-input{
        border:none;
        padding: 16px 20px 0 20px;
    }
    .content .evaluation_con>>>.ivu-input:focus{
        outline:none;
        border:none;
        box-shadow: 0 0 0 2px transparent; 
    }
    .content .evaluation_con>>>.ivu-input:hover{
        border:none;
    }
    .content .evaluation_con .number{
        font-size: 16px;
        font-weight: 400;
        color: #999999;
        padding:10px 20px;
        text-align: right;
        border-bottom: 1px solid #eeeeee;
    }
    .content .evaluation_con>>>.ivu-upload-drag,.content .evaluation_con>>>.ivu-upload-drag:hover{
        border: 0;
    }
    .content .evaluation_con .submit{
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .content .evaluation_con .submit .right button{
        width: 110px;
        height: 50px;
        border-radius: 4px;
        font-size: 20px;
        font-weight: 400;
        color: #FFFFFF;
        background: #F30213;
    }
    .upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .upload-list img{
        width: 100%;
        height: 100%;
    }
    .upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .upload-list:hover .upload-list-cover{
        display: block;
    }
    .upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .evaluation_con_list{
        margin-top: 50px;
    }
    .evaluation_con_list .item{
        display: flex;
        padding-bottom: 30px;
    }
    .evaluation_con_list .item .avatar,.evaluation_con_list .item .avatar img{
        width: 34px;
        height: 34px;
    }
    .evaluation_con_list .item .right{
        margin-left: 10px;
    }
    .evaluation_con_list .item .right .name{
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        line-height: 18px;
    }
    .evaluation_con_list .item .right .time{
        font-size: 12px;
        line-height: 12px;
        font-weight: 400;
        color: #999999;
        margin-top: 10px;
    }
    .evaluation_con_list .item .right .des{
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 24px;
        margin-top: 10px;
    }
    .evaluation_con_list .item .right .imgs{
        margin-top: 20px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .evaluation_con_list .item .right .imgs .img{
        margin-right: 20px;
    }
    .evaluation_con_list .item .right .imgs .img,.evaluation_con_list .item .right .imgs .img img{
        width: 150px;
        height: 100px;
    }
</style>
